<template>
  <div class="qq-face-panel" v-if="isShow">
    <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
        <!-- slides -->
        <swiper-slide 
            v-for="n in 7"
            :key="n"
        >
            <div class="qq-face-item"  
                v-for="i in 20" :data-key="'['+(n-1)+','+(i-1)+']'"
                :key="i"
                @click="selectFace((n-1)*20+i+1,n-1, i-1, -(i-1+(n-1)*20)*height)"
                style="min-height: 33px;"
            >
                <i class="qq-face-icon" :style="{width: '33px', height: '33px', backgroundPosition: '0 '+(-(i-1+(n-1)*20)*height)+'px'}"></i>
            </div>
            <div class="qq-face-item"
                @click.stop="deleteContent"
            >
                <i class="qq-face-icon" style="background-position: 0 -4620px; width: 33px; height: 33px;"></i>
            </div>
        </swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination swiper-pagination-face"  slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
import 'swiper/dist/css/swiper.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper';
export default {
  components: {
    swiper,
    swiperSlide
  },
  props: ['isShow'],
  data() {
    return {
        height: 33,
        current: 0,
        swiperOption: {
            notNextTick: true,
            scrollbar: {scrollbarHide: true},
            pagination: {
                el: '.swiper-pagination',
                bulletElement: 'span',
                type : 'bullets'
            }
        }
    };
  },
  computed: {},
  methods: {
    onChange(index) {
      this.current = index;
    },
    callback(e){},
    selectFace(gifIndex, col,row){
        let x = 0;
        let y = -(row + col*20) * this.height;
        let result = {
            gifIndex: `${gifIndex}`,
            placeholder: `[${col},${row}]`,
            htmlString: `<i data-index="${gifIndex}" class="qq-face-icon" contentEditable="false" style="background-position: ${x} ${y}px;"></i>`
        };
    
        this.$emit('insert-face', result);
    },
    deleteContent(){
        this.$emit('delete-input-content');
    }
  },
  created() {},
  mounted() {},
  watch:{
      isShow(){
          this.current = 0;
      }
  }
};
</script>
<style lang="scss" scoped>
$face-size: 66px;
.qq-face-panel {
    width: 100%;
    background: #fff;
}

.qq-face-list {
    padding-top: 20px;
}
.qq-face-item {
    float: left;
    display: flex;
    width: calc(100% / 7);
    height: $face-size;
    margin: 16px 0;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.qq-face-icon {
    display: inline-block;
    width: $face-size;
    height: $face-size;
    vertical-align: top;
    background-image:url("../assets/img/qqface2017.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
}

.swiper-pagination-face {
    padding-bottom: 20px;
    font-size: 0;
    line-height: 36px;
    text-align: center;
    position: static;

    > .swiper-pagination-bullet {
        display: inline-block;
        height: 32px;
        width: 32px;
        margin: 0 10px;
        border-radius: 100%;
        background-color: rgba(0,0,0,.2);
    }

    > .active {background: #333;}
}
</style>